<template>
  <el-dialog
    :visible.sync="dialogShow"
    :show-close="true"
    :append-to-body="false"
    :before-close="handleClose"
    class="publish-dialog normal-common-dialog-size"
  >
    <div v-loading="loading" style="min-height: 380px;position: relative;">
      <div class="list-tab-absolute">
        <ListTab v-model="activeName" :tabs="tabs" :is-center="true" padding-left="0px" @tabClick="tabClick"/>
      </div>
      <veLine
        v-if="chartData"
        ref="ageAnalysis"
        :data="chartData"
        :height="'400px'"
        :judge-width="true"
        :settings="chartSettings"
        :extend="extendData"
        resizeable
      />
      <empty-placeholder v-else :empty-img="emptyImg" image-size="100px" style="margin-top: 65px" />
    </div>
  </el-dialog>
</template>

<script>
import veLine from 'v-charts/lib/line.common';
import ListTab from '@/components/ListTab';
import { getPublishData } from '@/api/order';
import { isNumber } from '@/utils/tools';
import { format } from '@/filters/date';

import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import { moneyFilter, numberTextFormat } from '@/filters/number';
import emptyImg from '@/assets/empty-table-data.png';

export default {
  name: 'PublishChart',
  components: { ListTab, veLine, EmptyPlaceholder },
  props: {
    publishUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      emptyImg,
      dialogShow: false,
      loading: false,
      activeName: 7,
      orderId: '',
      tabs: [
        { id: 7, name: '7天' },
        { id: 30, name: '30天' },
        { id: 90, name: '90天' }
      ],
      chartData: null,
      url: ''
    };
  },
  computed: {
    chartSettings() {
      if (!this.chartData) return {};
      const labelMap = this.chartData.labelMap;
      if (labelMap) {
        return { labelMap };
      }
      return {};
    },
    extendData() {
      return {
        legend: {
          show: true,
          right: 10
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: (params) => {
              if (!isNumber(params)) {
                return params || '';
              } else {
                return moneyFilter(numberTextFormat(params, 1), false);
              }
            }
          },
          axisPointer: {
            snap: true
          }
        },
        xAxis: {
          axisLabel: {
            formatter: (params) => {
              const time = format(new Date(params), 'YYYY-MM-DD');
              return time === 'Invalid date' ? params : time;
            }
          }
        },
        color: ['#406EFF', '#FD8546', '#F9C142', '#7254F6', '#FF6573', '#31CC9C']
      };
    }
  },
  methods: {
    openDialog(orderId, url) {
      this.dialogShow = true;
      this.orderId = orderId;
      this.url = url;
      this.getData();
    },
    tabClick() {
      this.getData();
    },
    getData() {
      const params = {
        id: this.orderId,
        publishUrl: this.url || this.publishUrl,
        days: this.activeName
      };
      this.loading = true;
      // const testData = {
      //   columns: ['时间', '点赞', '评论'],
      //   rows: [
      //     ['2021/07/21', 100, 50],
      //     ['2021/07/22', 120, 30],
      //     ['2021/07/23', 90, 60],
      //     ['2021/07/24', 80, 70]
      //   ]
      // };
      getPublishData(params).then(res => {
        this.loading = false;
        if (res.code === 200 && res.data.columns && res.data.rows && res.data.rows.length > 0) {
          this.handelData(res.data);
          this.chartData = res.data;
        } else {
          this.chartData = null;
        }
      }).catch(() => {
        this.loading = false;
        this.chartData = null;
      });
    },
    handelData(data) {
      data.labelMap = {};
      data.columns = data.columns.map((i, index) => {
        data.labelMap[index] = i;
        return index;
      });
    },
    handleClose() {
      this.dialogShow = false;
      this.chartData = null;
    }
  }
};
</script>

<style lang="scss" scoped>
.publish-dialog {
  &::v-deep {
    .el-dialog__body {
      padding-top: 0 !important;
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
  }
}
.list-tab-absolute{
  border-bottom: 1px solid #F5F5F5;
  margin-bottom: 10px;
}

</style>
